<template>
    <el-container class="home_container">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :router="true">
<!--          <el-submenu index="1">-->
<!--            <template slot="title"><i class="el-icon-message"></i>管理员</template>-->
          <el-submenu index="index" v-for="(item,index) in menu" :key="index">
            <template slot="title"><i :class="item.img"></i>{{item.name}}</template>
<!--            <el-menu-item index="/admin">管理员列表</el-menu-item>-->
<!--            <el-menu-item :index="item.url">管理员列表</el-menu-item>-->
            <el-menu-item-group>
               <el-menu-item :class="childItem.img" :index="item.url" v-for="(childItem,childIndex) in item.children" :key="childIndex" v-if="childItem.type === 1">
                  {{childItem.name}}
               </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
<!--          <el-submenu index="2">-->
<!--            <template slot="title"><i class="el-icon-message"></i>角色功能</template>-->
<!--            <el-menu-item index="/role">角色列表</el-menu-item>-->
<!--          </el-submenu>-->
<!--          <el-submenu index="3">-->
<!--            <template slot="title"><i class="el-icon-message"></i>菜单功能</template>-->
<!--            <el-menu-item index="/rule">菜单列表</el-menu-item>-->
<!--          </el-submenu>-->


        </el-menu>
      </el-aside>

      <el-container>
        <!--  退出按钮-->
        <el-header>
          <el-button type="primary" @click="logout()" style="float: right;margin-top: 10px;">退出</el-button>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </template>

<script>
export default {
  data() {
    return {
      menu: [],

    }
  },
  created() {
    this.getMenu()
  },
  methods:{
    async getMenu() {
       let menuUrl = 'http://124.223.83.80:8082/api/Menu/index';
       const {data:menuResult} = await this.$ajax.get(menuUrl)
       // console.log(menuResult)
      this.menu = menuResult.data
    },

    logout(){
      //清楚session
      window.sessionStorage.clear()
      //跳转到、login
      this.$router.push('/login')
    }

  }
};
</script>


<style>
.home_container{
  height: 100%;
}
.el-header {
  background-color: #2b4b6b;
  color: #fff;
}
.el-aside {
  background-color: #ccc;
  height: 100%;
}
</style>